<!DOCTYPE html>
<!--headTrap<body></body><head></head><html></html>--><html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">

<script nonce="2063410053" type="text/javascript">
window.__nonce_str = "2063410053"
if (location.href.indexOf("safe=0") == -1 && window.__nonce_str) {
	window.__moonsafe_csp_offset || (window.__moonsafe_csp_offset = 18);
	document.write('<meta http-equiv="Content-Security-Policy" content="script-src https: \'unsafe-inline\' \'unsafe-eval\' *.qq.com *.weishi.com'+(window.__nonce_str ? ' \'nonce-' + window.__nonce_str + "\'":"")+ '">');
        
}
</script>

        <script nonce="2063410053" type="text/javascript">
            window.logs = {
                pagetime: {}
            };
            window.logs.pagetime['html_begin'] = (+new Date());
        </script>
        
<script nonce="2063410053" type="text/javascript">
    var biz = "MzAxODE2MjM1MA=="||"";
    var sn = "9be5f570934f0fa39211b5262f66f358" || ""|| "";
    var mid = "2651551663" || ""|| "";
    var idx = "2" || "" || "";
    window.__allowLoadResFromMp = true; 
    
</script>
<script nonce="2063410053" type="text/javascript">
var page_begintime=+new Date,is_rumor="",norumor="";
1*is_rumor&&!(1*norumor)&&biz&&mid&&(document.referrer&&-1!=document.referrer.indexOf("mp.weixin.qq.com/mp/rumor")||(location.href="http://mp.weixin.qq.com/mp/rumor?action=info&__biz="+biz+"&mid="+mid+"&idx="+idx+"&sn="+sn+"#wechat_redirect")),
document.domain="qq.com";
</script> 
<script nonce="2063410053" type="text/javascript">
var MutationObserver=window.WebKitMutationObserver||window.MutationObserver||window.MozMutationObserver,isDangerSrc=function(t){
if(t){
var e=t.match(/http(?:s)?:\/\/([^\/]+?)(\/|$)/);
if(e&&!/qq\.com(\:8080)?$/.test(e[1])&&!/weishi\.com$/.test(e[1]))return!0;
}
return!1;
},ishttp=0==location.href.indexOf("http://");
-1==location.href.indexOf("safe=0")&&ishttp&&"function"==typeof MutationObserver&&"mp.weixin.qq.com"==location.host&&(window.__observer_data={
count:0,
exec_time:0,
list:[]
},window.__observer=new MutationObserver(function(t){
window.__observer_data.count++;
var e=new Date,r=[];
t.forEach(function(t){
for(var e=t.addedNodes,o=0;o<e.length;o++){
var n=e[o];
if("SCRIPT"===n.tagName){
var i=n.src;
isDangerSrc(i)&&(window.__observer_data.list.push(i),r.push(n)),!i&&window.__nonce_str&&n.getAttribute("nonce")!=window.__nonce_str&&(window.__observer_data.list.push("inlinescript_without_nonce"),
r.push(n));
}
}
});
for(var o=0;o<r.length;o++){
var n=r[o];
n.parentNode&&n.parentNode.removeChild(n);
}
window.__observer_data.exec_time+=new Date-e;
}),window.__observer.observe(document,{
subtree:!0,
childList:!0
})),function(){
if(-1==location.href.indexOf("safe=0")&&Math.random()<.01&&ishttp&&HTMLScriptElement.prototype.__lookupSetter__&&"undefined"!=typeof Object.defineProperty){
window.__danger_src={
xmlhttprequest:[],
script_src:[],
script_setAttribute:[]
};
var t="$"+Math.random();
HTMLScriptElement.prototype.__old_method_script_src=HTMLScriptElement.prototype.__lookupSetter__("src"),
HTMLScriptElement.prototype.__defineSetter__("src",function(t){
t&&isDangerSrc(t)&&window.__danger_src.script_src.push(t),this.__old_method_script_src(t);
});
var e="element_setAttribute"+t;
Object.defineProperty(Element.prototype,e,{
value:Element.prototype.setAttribute,
enumerable:!1
}),Element.prototype.setAttribute=function(t,r){
"SCRIPT"==this.tagName&&"src"==t&&isDangerSrc(r)&&window.__danger_src.script_setAttribute.push(r),
this[e](t,r);
};
}
}();
</script> 

        <link rel="dns-prefetch" href="//res.wx.qq.com">
<link rel="dns-prefetch" href="//mmbiz.qpic.cn">
<link rel="shortcut icon" type="image/x-icon" href="//res.wx.qq.com/mmbizwap/zh_CN/htmledition/images/icon/common/favicon22c41b.ico">
<script nonce="2063410053" type="text/javascript">
    String.prototype.html = function(encode) {
        var replace =["&#39;", "'", "&quot;", '"', "&nbsp;", " ", "&gt;", ">", "&lt;", "<", "&amp;", "&", "&yen;", "¥"];
        if (encode) {
            replace.reverse();
        }
        for (var i=0,str=this;i< replace.length;i+= 2) {
             str=str.replace(new RegExp(replace[i],'g'),replace[i+1]);
        }
        return str;
    };

    window.isInWeixinApp = function() {
        return /MicroMessenger/.test(navigator.userAgent);
    };

    window.getQueryFromURL = function(url) {
        url = url || 'http://qq.com/s?a=b#rd'; 
        var tmp = url.split('?'),
            query = (tmp[1] || "").split('#')[0].split('&'),
            params = {};
        for (var i=0; i<query.length; i++) {
            var arg = query[i].split('=');
            params[arg[0]] = arg[1];
        }
        if (params['pass_ticket']) {
        	params['pass_ticket'] = encodeURIComponent(params['pass_ticket'].html(false).html(false).replace(/\s/g,"+"));
        }
        return params;
    };

    (function() {
	    var params = getQueryFromURL(location.href);
        window.uin = params['uin'] || "" || '';
        window.key = params['key'] || "" || '';
        window.wxtoken = params['wxtoken'] || '';
        window.pass_ticket = params['pass_ticket'] || '';
    })();

    function wx_loaderror() {
        if (location.pathname === '/bizmall/reward') {
            new Image().src = '/mp/jsreport?key=96&content=reward_res_load_err&r=' + Math.random();
        }
    }

</script>

        <title>一篇文章说清浏览器解析和CSS（GPU）动画优化</title>
        
<style>html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;line-height:1.6}body{-webkit-touch-callout:none;font-family:-apple-system-font,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;background-color:#f3f3f3;line-height:inherit}body.rich_media_empty_extra{background-color:#fff}body.rich_media_empty_extra .rich_media_area_primary:before{display:none}h1,h2,h3,h4,h5,h6{font-weight:400;font-size:16px}*{margin:0;padding:0}a{color:#607fa6;text-decoration:none}.rich_media_inner{font-size:16px;word-wrap:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.rich_media_area_primary{position:relative;padding:20px 15px 15px;background-color:#fff}.rich_media_area_primary:before{content:" ";position:absolute;left:0;top:0;width:100%;height:1px;border-top:1px solid #e5e5e5;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scaleY(0.5);transform:scaleY(0.5);top:auto;bottom:-2px}.rich_media_area_primary .original_img_wrp{display:inline-block;font-size:0}.rich_media_area_primary .original_img_wrp .tips_global{display:block;margin-top:.5em;font-size:14px;text-align:right;width:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}.rich_media_area_extra{padding:0 15px 0}.rich_media_title{margin-bottom:10px;line-height:1.4;font-weight:400;font-size:24px}.rich_media_meta_list{margin-bottom:18px;line-height:20px;font-size:0}.rich_media_meta_list em{font-style:normal}.rich_media_meta{display:inline-block;vertical-align:middle;margin-right:8px;margin-bottom:10px;font-size:16px}.meta_original_tag{display:inline-block;vertical-align:middle;padding:1px .5em;border:1px solid #9e9e9e;color:#8c8c8c;border-top-left-radius:20% 50%;-moz-border-radius-topleft:20% 50%;-webkit-border-top-left-radius:20% 50%;border-top-right-radius:20% 50%;-moz-border-radius-topright:20% 50%;-webkit-border-top-right-radius:20% 50%;border-bottom-left-radius:20% 50%;-moz-border-radius-bottomleft:20% 50%;-webkit-border-bottom-left-radius:20% 50%;border-bottom-right-radius:20% 50%;-moz-border-radius-bottomright:20% 50%;-webkit-border-bottom-right-radius:20% 50%;font-size:15px;line-height:1.1}.meta_enterprise_tag img{width:30px;height:30px!important;display:block;position:relative;margin-top:-3px;border:0}.rich_media_meta_text{color:#8c8c8c}span.rich_media_meta_nickname{display:none}.rich_media_thumb_wrp{margin-bottom:6px}.rich_media_thumb_wrp .original_img_wrp{display:block}.rich_media_thumb{display:block;width:100%}.rich_media_content{overflow:hidden;color:#3e3e3e}.rich_media_content *{max-width:100%!important;box-sizing:border-box!important;-webkit-box-sizing:border-box!important;word-wrap:break-word!important}.rich_media_content p{clear:both;min-height:1em}.rich_media_content em{font-style:italic}.rich_media_content fieldset{min-width:0}.rich_media_content .list-paddingleft-2{padding-left:30px}.rich_media_content blockquote{margin:0;padding-left:10px;border-left:3px solid #dbdbdb}img{height:auto!important}@media(min-device-width:375px) and (max-device-width:667px) and (-webkit-min-device-pixel-ratio:2){.mm_appmsg .rich_media_inner,.mm_appmsg .rich_media_meta,.mm_appmsg .discuss_list,.mm_appmsg .rich_media_extra,.mm_appmsg .title_tips .tips{font-size:17px}.mm_appmsg .meta_original_tag{font-size:15px}}@media(min-device-width:414px) and (max-device-width:736px) and (-webkit-min-device-pixel-ratio:3){.mm_appmsg .rich_media_title{font-size:25px}}@media screen and (min-width:1024px){.rich_media{width:740px;margin-left:auto;margin-right:auto}.rich_media_inner{padding:20px}body{background-color:#fff}}@media screen and (min-width:1025px){body{font-family:"Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif}.rich_media{position:relative}.rich_media_inner{background-color:#fff;padding-bottom:100px}}.radius_avatar{display:inline-block;background-color:#fff;padding:3px;border-radius:50%;-moz-border-radius:50%;-webkit-border-radius:50%;overflow:hidden;vertical-align:middle}.radius_avatar img{display:block;width:100%;height:100%;border-radius:50%;-moz-border-radius:50%;-webkit-border-radius:50%;background-color:#eee}.cell{padding:.8em 0;display:block;position:relative}.cell_hd,.cell_bd,.cell_ft{display:table-cell;vertical-align:middle;word-wrap:break-word;word-break:break-all;white-space:nowrap}.cell_primary{width:2000px;white-space:normal}.flex_cell{padding:10px 0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.flex_cell_primary{width:100%;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;box-flex:1;flex:1}.original_tool_area{display:block;padding:.75em 1em 0;-webkit-tap-highlight-color:rgba(0,0,0,0);color:#3e3e3e;border:1px solid #eaeaea;margin:20px 0}.original_tool_area .tips_global{position:relative;padding-bottom:.5em;font-size:15px}.original_tool_area .tips_global:after{content:" ";position:absolute;left:0;bottom:0;right:0;height:1px;border-bottom:1px solid #dbdbdb;-webkit-transform-origin:0 100%;transform-origin:0 100%;-webkit-transform:scaleY(0.5);transform:scaleY(0.5)}.original_tool_area .radius_avatar{width:27px;height:27px;padding:0;margin-right:.5em}.original_tool_area .radius_avatar img{height:100%!important}.original_tool_area .flex_cell_bd{width:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}.original_tool_area .flex_cell_ft{font-size:14px;color:#8c8c8c;padding-left:1em;white-space:nowrap}.original_tool_area .icon_access:after{content:" ";display:inline-block;height:8px;width:8px;border-width:1px 1px 0 0;border-color:#cbcad0;border-style:solid;transform:matrix(0.71,0.71,-0.71,0.71,0,0);-ms-transform:matrix(0.71,0.71,-0.71,0.71,0,0);-webkit-transform:matrix(0.71,0.71,-0.71,0.71,0,0);position:relative;top:-2px;top:-1px}.weui_loading{width:20px;height:20px;display:inline-block;vertical-align:middle;-webkit-animation:weuiLoading 1s steps(12,end) infinite;animation:weuiLoading 1s steps(12,end) infinite;background:transparent url() no-repeat;-webkit-background-size:100%;background-size:100%}@-webkit-keyframes weuiLoading{0%{-webkit-transform:rotate3d(0,0,1,0deg)}100%{-webkit-transform:rotate3d(0,0,1,360deg)}}@keyframes weuiLoading{0%{-webkit-transform:rotate3d(0,0,1,0deg)}100%{-webkit-transform:rotate3d(0,0,1,360deg)}}.gif_img_wrp{display:inline-block;font-size:0;position:relative;font-weight:400;font-style:normal;text-indent:0;text-shadow:none 1px 1px rgba(0,0,0,0.5)}.gif_img_wrp img{vertical-align:top}.gif_img_tips{background:rgba(0,0,0,0.6)!important;filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#99000000',endcolorstr = '#99000000');border-top-left-radius:1.2em 50%;-moz-border-radius-topleft:1.2em 50%;-webkit-border-top-left-radius:1.2em 50%;border-top-right-radius:1.2em 50%;-moz-border-radius-topright:1.2em 50%;-webkit-border-top-right-radius:1.2em 50%;border-bottom-left-radius:1.2em 50%;-moz-border-radius-bottomleft:1.2em 50%;-webkit-border-bottom-left-radius:1.2em 50%;border-bottom-right-radius:1.2em 50%;-moz-border-radius-bottomright:1.2em 50%;-webkit-border-bottom-right-radius:1.2em 50%;line-height:2.3;font-size:11px;color:#fff;text-align:center;position:absolute;bottom:10px;left:10px;min-width:65px}.gif_img_tips.loading{min-width:75px}.gif_img_tips i{vertical-align:middle;margin:-0.2em .73em 0 -2px}.gif_img_play_arrow{display:inline-block;width:0;height:0;border-width:8px;border-style:dashed;border-color:transparent;border-right-width:0;border-left-color:#fff;border-left-style:solid;border-width:5px 0 5px 8px}.gif_img_loading{width:14px;height:14px}i.gif_img_loading{margin-left:-4px}.gif_bg_tips_wrp{position:relative;height:0;line-height:0;margin:0;padding:0}.gif_bg_tips_wrp .gif_img_tips_group{position:absolute;top:0;left:0;z-index:9999}.gif_bg_tips_wrp .gif_img_tips_group .gif_img_tips{top:0;left:0;bottom:auto}.rich_media_global_msg{position:fixed;top:0;left:0;right:0;padding:1em 35px 1em 15px;z-index:1;background-color:#c6e0f8;color:#8c8c8c;font-size:13px}.rich_media_global_msg .icon_closed{position:absolute;right:15px;top:50%;margin-top:-5px;line-height:300px;overflow:hidden;-webkit-tap-highlight-color:rgba(0,0,0,0);background:transparent url(/mmbizwap/zh_CN/htmledition/images/icon/appmsg/icon_appmsg_msg_closed_sprite.2x.png) no-repeat 0 0;width:11px;height:11px;vertical-align:middle;display:inline-block;-webkit-background-size:100% auto;background-size:100% auto}.rich_media_global_msg .icon_closed:active{background-position:0 -17px}.preview_appmsg .rich_media_title{margin-top:1.9em}@media screen and (min-width:1024px){.rich_media_global_msg{position:relative;margin:0 20px}.preview_appmsg .rich_media_title{margin-top:0}}</style>
<style>
     
    </style>
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="//res.wx.qq.com/mmbizwap/zh_CN/htmledition/style/page/appmsg/page_mp_article_improve_pc2c9cd6.css">
<![endif]-->

    </head>
    <body id="activity-detail" class="zh_CN mm_appmsg">
        
    <script nonce="2063410053" type="text/javascript">
        var write_sceen_time = (+new Date());
    </script>

    <div id="js_article" class="rich_media">
        
        <div id="js_top_ad_area" class="top_banner">
 
        </div>
                

        <div class="rich_media_inner">
                        <div id="page-content">
                <div id="img-content" class="rich_media_area_primary">
                    <h2 class="rich_media_title" id="activity-name">
                        一篇文章说清浏览器解析和CSS（GPU）动画优化 
                    </h2>
                    <div class="rich_media_meta_list">
                        						                        <em id="post-date" class="rich_media_meta rich_media_meta_text">2017-01-15</em>

                                                <a class="rich_media_meta rich_media_meta_link rich_media_meta_nickname" href="##" id="post-user">前端大全</a>
                        <span class="rich_media_meta rich_media_meta_text rich_media_meta_nickname">前端大全</span>

                        <div id="js_profile_qrcode" class="profile_container" style="display:none;">
                            <div class="profile_inner">
                                <strong class="profile_nickname">前端大全</strong>
                                <img class="profile_avatar" id="js_profile_qrcode_img" src="" alt="">

                                <p class="profile_meta">
                                <label class="profile_meta_label">微信号</label>
                                <span class="profile_meta_value">FrontDev</span>
                                </p>

                                <p class="profile_meta">
                                <label class="profile_meta_label">功能介绍</label>
                                <span class="profile_meta_value">分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯</span>
                                </p>
                                
                            </div>
                            <span class="profile_arrow_wrp" id="js_profile_arrow_wrp">
                                <i class="profile_arrow arrow_out"></i>
                                <i class="profile_arrow arrow_in"></i>
                            </span>
                        </div>
                    </div>
                    
                    
                    
                    
                                                            
                                                            
                    
                    <div class="rich_media_content " id="js_content">
                        

                        
                        
                        <p style="max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); text-align: center; box-sizing: border-box !important; word-wrap: break-word !important;"><span style="max-width: 100%; color: rgb(255, 41, 65); font-size: 14px; line-height: 22.4px; box-sizing: border-box !important; word-wrap: break-word !important;">&gt;点击</span><span style="max-width: 100%; font-size: 14px; line-height: 22.4px; color: rgb(0, 128, 255); box-sizing: border-box !important; word-wrap: break-word !important;">上方公众号</span><span style="max-width: 100%; color: rgb(255, 41, 65); font-size: 14px; line-height: 22.4px; box-sizing: border-box !important; word-wrap: break-word !important;">，可快速关注）</span></p><p style="max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; line-height: 25.6px; text-align: center; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;"><span style="max-width: 100%; color: rgb(255, 41, 65); font-size: 14px; line-height: 22.4px; box-sizing: border-box !important; word-wrap: break-word !important;"><br style="max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;"  /></span></p><blockquote style="max-width: 100%; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;"><p style="max-width: 100%; min-height: 1em; line-height: 25.6px; box-sizing: border-box !important; word-wrap: break-word !important;"><span style="max-width: 100%; font-size: 14px; box-sizing: border-box !important; word-wrap: break-word !important;">作者：黑色的影子</span></p><p style="max-width: 100%; min-height: 1em; line-height: 25.6px; box-sizing: border-box !important; word-wrap: break-word !important;"><span style="max-width: 100%; font-size: 14px; box-sizing: border-box !important; word-wrap: break-word !important;">segmentfault.com/a/1190000008015671</span></p><p style="max-width: 100%; min-height: 1em; line-height: 25.6px; font-size: 16.1905px; box-sizing: border-box !important; word-wrap: break-word !important;"><span style="max-width: 100%; color: rgb(0, 128, 255); text-decoration: underline; font-size: 14px; box-sizing: border-box !important; word-wrap: break-word !important;"><a href="http://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&amp;mid=402764500&amp;idx=1&amp;sn=cfcc178c7718d548b7cdc04758502bd9&amp;scene=21#wechat_redirect" target="_blank" data_ue_src="http://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&amp;mid=402764500&amp;idx=1&amp;sn=cfcc178c7718d548b7cdc04758502bd9&amp;scene=21#wechat_redirect" style="color: rgb(0, 128, 255); max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;">如有好文章投稿，请点击 → 这里了解详情</a></span></p></blockquote><p><br  /></p><p>相信不少人在做移动端动画的时候遇到了卡顿的问题，这篇文章尝试从浏览器渲染的角度；一点一点告诉你动画优化的原理及其技巧，作为你工作中优化动画的参考。文末有优化技巧的总结。</p><p><br  /></p><p>因为GPU合成没有官方规范，每个浏览器的问题和解决方式也不同；所以文章内容仅供参考。</p><p><br  /></p><p><strong><span style="color: rgb(255, 0, 0);">浏览器渲染</span></strong></p><p><br  /></p><p>提高动画的优化不得不提及浏览器是如何渲染一个页面。在从服务器中拿到数据后，浏览器会先做解析三类东西：</p><p><br  /></p><ul class=" list-paddingleft-2" style="list-style-type: disc;"><li><p>解析html,xhtml,svg这三类文档，形成dom树。</p></li><li><p>解析css，产生css rule tree。</p></li><li><p>解析js，js会通过api来操作dom tree和css rule tree。</p></li></ul><p><br  /></p><p>解析完成之后，浏览器引擎会通过dom tree和css rule tree来构建rendering tree：</p><p><br  /></p><ul class=" list-paddingleft-2" style="list-style-type: disc;"><li><p>rendering tree和dom tree并不完全相同，例如：&lt;head&gt;&lt;/head&gt;或display:none的东西就不会放在渲染树中。</p></li><li><p>css rule tree主要是完成匹配，并把css rule附加给rendering tree的每个element。</p></li></ul><p><br  /></p><p>在渲染树构建完成后，</p><p><br  /></p><ul class=" list-paddingleft-2" style="list-style-type: disc;"><li><p>浏览器会对这些元素进行定位和布局，这一步也叫做reflow或者layout。</p></li><li><p>浏览器绘制这些元素的样式，颜色，背景，大小及边框等，这一步也叫做repaint。</p></li><li><p>然后浏览器会将各层的信息发送给GPU，GPU会将各层合成；显示在屏幕上。</p></li></ul><p><br  /></p><p><span style="color: rgb(255, 0, 0);"><strong>渲染优化原理</strong></span></p><p><br  /></p><p>如上所说，渲染树构建完成后；浏览器要做的步骤：</p><p><br  /></p><p>reflow——》repaint——》composite</p><p><br  /></p><p><strong>reflow和repaint</strong></p><p><br  /></p><p>reflow和repaint都是耗费浏览器性能的操作，这两者尤以reflow为甚；因为每次reflow，浏览器都要重新计算每个元素的形状和位置。</p><p><br  /></p><p>由于reflow和repaint都是非常消耗性能的，我们的浏览器为此做了一些优化。浏览器会将reflow和repaint的操作积攒一批，然后做一次reflow。但是有些时候，你的代码会强制浏览器做多次reflow。例如：</p><p><br  /></p><blockquote><p><span style="font-size: 12px;"><span class="crayon-t" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: bold !important; color: rgb(128, 0, 128) !important;">var</span><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-v" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;">content</span><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> = </span><span class="crayon-v" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;">document</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">.</span><span class="crayon-e" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">getElementById</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">(</span><span class="crayon-s" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: rgb(221, 17, 68) !important;">'content'</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">);</span></span></p><p><span style="font-size: 12px;"><span class="crayon-v" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;">content</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">.</span><span class="crayon-v" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;">style</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">.</span><span class="crayon-v" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;">width</span><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> = </span><span class="crayon-cn" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 153, 153) !important;">700px</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">;</span></span></p><p><span style="font-size: 12px;"><span class="crayon-t" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important; color: rgb(128, 0, 128) !important;">var</span><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-v" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;">contentWidth</span><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> = </span><span class="crayon-v" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;">content</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">.</span><span class="crayon-v" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;">offsetWidth</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">;</span></span></p><p><span style="font-size: 12px;"><span class="crayon-v" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;">content</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">.</span><span class="crayon-v" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 45, 122) !important;">style</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">.</span><span class="crayon-e " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">backgound</span><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> = </span><span class="crayon-s" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(221, 17, 68) !important;">'red'</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">;</span></span></p></blockquote><p><br  /></p><p>以上第三行代码，需要浏览器reflow后；再获取值，所以会导致浏览器多做一次reflow。</p><p><br  /></p><p>下面是一些针对reflow和repaint的最佳实践：</p><p><br  /></p><ul class=" list-paddingleft-2" style="list-style-type: disc;"><li><p>不要一条一条地修改dom的样式，尽量使用className一次修改。</p></li><li><p>将dom离线后修改</p></li><ul class=" list-paddingleft-2" style="list-style-type: square;"><li><p>使用documentFragment对象在内存里操作dom。</p></li><li><p>先把dom节点display:none;（会触发一次reflow）。然后做大量的修改后，再把它显示出来。</p></li><li><p>clone一个dom节点在内存里，修改之后；与在线的节点相替换。</p></li></ul><li><p>不要使用table布局，一个小改动会造成整个table的重新布局。</p></li><li><p>transform和opacity只会引起合成，不会引起布局和重绘。</p></li></ul><p><br  /></p><p>从上述的最佳实践中你可能发现，动画优化一般都是尽可能地减少reflow、repaint的发生。关于哪些属性会引起reflow、repaint及composite，你可以在这个网站找到https://csstriggers.com/。</p><p><br  /></p><p><strong>composite</strong></p><p><br  /></p><p>在reflow和repaint之后，浏览器会将多个复合层传入GPU；进行合成工作，那么合成是如何工作的呢？</p><p><br  /></p><p>假设我们的页面中有A和B两个元素，它们有absolute和z-index属性；浏览器会重绘它们，然后将图像发送给GPU；然后GPU将会把多个图像合成展示在屏幕上。</p><p><br  /></p><blockquote><p><span style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(255, 0, 0) !important;">&lt;style&gt;</span></p><p><span style="font-size: 12px;"><span class="crayon-k " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">#a, #b </span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">{</span></span></p><p><span style="font-size: 12px;"><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-e " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">position</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">:</span><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-i " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;">absolute</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">;</span></span></p><p><span style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">}</span></p><p><span style="font-size: 12px;">&nbsp;</span></p><p><span style="font-size: 12px;"><span class="crayon-k " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">#a </span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">{</span></span></p><p><span style="font-size: 12px;"><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-e " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">left</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">:</span><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-i " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;">30px</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">;</span></span></p><p><span style="font-size: 12px;"><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-e " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">top</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">:</span><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-i " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;">30px</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">;</span></span></p><p><span style="font-size: 12px;"><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-e " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">z-index</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">:</span><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-i " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;">2</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">;</span></span></p><p><span style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">}</span></p><p><span style="font-size: 12px;">&nbsp;</span></p><p><span style="font-size: 12px;"><span class="crayon-k " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">#b </span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">{</span></span></p><p><span style="font-size: 12px;"><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-e " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">z-index</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">:</span><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-i " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;">1</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">;</span></span></p><p><span style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">}</span></p><p><span style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(255, 0, 0) !important;">&lt;/style&gt;</span></p><p><span style="font-size: 12px;"><span class="crayon-r " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;">&lt;div </span><span class="crayon-e " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">id</span><span class="crayon-o" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;">=</span><span class="crayon-s " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(221, 17, 68) !important;">"#a"</span><span class="crayon-r " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;">&gt;</span><span class="crayon-i " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;">A</span><span class="crayon-r " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;">&lt;/div&gt;</span></span></p><p><span style="font-size: 12px;"><span class="crayon-r " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;">&lt;div </span><span class="crayon-e " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">id</span><span class="crayon-o" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;">=</span><span class="crayon-s " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(221, 17, 68) !important;">"#b"</span><span class="crayon-r " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;">&gt;</span><span class="crayon-i " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;">B</span><span class="crayon-r " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;">&lt;/div&gt;</span></span></p></blockquote><p><br  /></p><p style="text-align: center;"><img data-src="http://mmbiz.qpic.cn/mmbiz_png/zPh0erYjkib24LZuCujH85EZfnSsNMFZLcDjPudIhkTmprLVFTwWCRDPCmib2KqEHzyDDFX82FIdgfAT5B3pluCA/0?wx_fmt=png" class="" data-type="png" data-ratio="0.39875" data-w="800"  /></p><p><br  /></p><p>我们将A元素使用left属性，做一个移动动画：</p><p><br  /></p><blockquote><p><span style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(255, 0, 0) !important;">&lt;style&gt;</span></p><p><span style="font-size: 12px;"><span class="crayon-k " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">#a, #b </span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">{</span></span></p><p><span style="font-size: 12px;"><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-e " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">position</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">:</span><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-i " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;">absolute</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">;</span></span></p><p><span style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">}</span></p><p><span style="font-size: 12px;">&nbsp;</span></p><p><span style="font-size: 12px;"><span class="crayon-k " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">#a </span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">{</span></span></p><p><span style="font-size: 12px;"><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-e " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">left</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">:</span><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-i " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;">10px</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">;</span></span></p><p><span style="font-size: 12px;"><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-e " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">top</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">:</span><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-i " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;">10px</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">;</span></span></p><p><span style="font-size: 12px;"><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-e " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">z-index</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">:</span><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-i " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;">2</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">;</span></span></p><p><span style="font-size: 12px;"><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-e " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">animation</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">:</span><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-i " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;">move</span><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-i " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;">1s</span><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-i " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;">linear</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">;</span></span></p><p><span style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">}</span></p><p><span style="font-size: 12px;">&nbsp;</span></p><p><span style="font-size: 12px;"><span class="crayon-k " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">#b </span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">{</span></span></p><p><span style="font-size: 12px;"><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-e " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">left</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">:</span><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-i " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;">50px</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">;</span></span></p><p><span style="font-size: 12px;"><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-e " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">top</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">:</span><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-i " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;">50px</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">;</span></span></p><p><span style="font-size: 12px;"><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-e " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">z-index</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">:</span><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-i " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;">1</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">;</span></span></p><p><span style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">}</span></p><p><span style="font-size: 12px;">&nbsp;</span></p><p><span style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-style: italic; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(102, 102, 102) !important;">@keyframes move {</span></p><p><span style="font-size: 12px;"><span class="crayon-n" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-style: italic; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(102, 102, 102) !important;"> from { left: 30px;</span><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">}</span></span></p><p><span style="font-size: 12px;"><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-k " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">to </span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">{</span><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-e " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">left</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">:</span><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-i " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;">100px</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">;</span><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">}</span></span></p><p><span style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">}</span></p><p><span style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(255, 0, 0) !important;">&lt;/style&gt;</span></p><p><span style="font-size: 12px;"><span class="crayon-r " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;">&lt;div </span><span class="crayon-e " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">id</span><span class="crayon-o" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;">=</span><span class="crayon-s " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(221, 17, 68) !important;">"#a"</span><span class="crayon-r " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;">&gt;</span><span class="crayon-i " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;">A</span><span class="crayon-r " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;">&lt;/div&gt;</span></span></p><p><span style="font-size: 12px;"><span class="crayon-r " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;">&lt;div </span><span class="crayon-e " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">id</span><span class="crayon-o" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;">=</span><span class="crayon-s " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(221, 17, 68) !important;">"#b"</span><span class="crayon-r " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;">&gt;</span><span class="crayon-i " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;">B</span><span class="crayon-r " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;">&lt;/div&gt;</span></span></p></blockquote><p><br  /></p><p>在这个例子中，对于动画的每一帧；浏览器会计算元素的几何形状，渲染新状态的图像；并把它们发送给GPU。（你没看错，position也会引起浏览器重排的）尽管浏览器做了优化，在repaint时，只会repaint部分区域；但是我们的动画仍然不够流畅。</p><p><br  /></p><p>因为重排和重绘发生在动画的每一帧，一个有效避免reflow和repaint的方式是我们仅仅画两个图像；一个是a元素，一个是b元素及整个页面；我们将这两张图片发送给GPU，然后动画发生的时候；只做两张图片相对对方的平移。也就是说，仅仅合成缓存的图片将会很快；这也是GPU的优势——它能非常快地以亚像素精度地合成图片，并给动画带来平滑的曲线。</p><p><br  /></p><p>为了仅发生composite，我们做动画的css property必须满足以下三个条件：</p><p><br  /></p><ul class=" list-paddingleft-2" style="list-style-type: disc;"><li><p>不影响文档流。</p></li><li><p>不依赖文档流。</p></li><li><p>不会造成重绘。</p></li></ul><p><br  /></p><p>满足以上以上条件的css property只有transform和opacity。你可能以为position也满足以上条件，但事实不是这样，举个例子left属性可以使用百分比的值，依赖于它的offset parent。还有em、vh等其他单位也依赖于他们的环境。</p><p><br  /></p><p>我们使用translate来代替left</p><p><br  /></p><blockquote><p><span style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(255, 0, 0) !important;">&lt;style&gt;</span></p><p><span style="font-size: 12px;"><span class="crayon-k " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">#a, #b </span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">{</span></span></p><p><span style="font-size: 12px;"><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-e " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">position</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">:</span><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-i " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;">absolute</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">;</span></span></p><p><span style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">}</span></p><p><span style="font-size: 12px;">&nbsp;</span></p><p><span style="font-size: 12px;"><span class="crayon-k " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">#a </span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">{</span></span></p><p><span style="font-size: 12px;"><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-e " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">left</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">:</span><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-i " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;">10px</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">;</span></span></p><p><span style="font-size: 12px;"><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-e " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">top</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">:</span><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-i " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;">10px</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">;</span></span></p><p><span style="font-size: 12px;"><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-e " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">z-index</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">:</span><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-i " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;">2</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">;</span></span></p><p><span style="font-size: 12px;"><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-e " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">animation</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">:</span><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-i " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;">move</span><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-i " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;">1s</span><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-i " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;">linear</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">;</span></span></p><p><span style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">}</span></p><p><span style="font-size: 12px;">&nbsp;</span></p><p><span style="font-size: 12px;"><span class="crayon-k " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">#b </span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">{</span></span></p><p><span style="font-size: 12px;"><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-e " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">left</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">:</span><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-i " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;">50px</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">;</span></span></p><p><span style="font-size: 12px;"><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-e " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">top</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">:</span><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-i " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;">50px</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">;</span></span></p><p><span style="font-size: 12px;"><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-e " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">z-index</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">:</span><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-i " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;">1</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">;</span></span></p><p><span style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">}</span></p><p><span style="font-size: 12px;">&nbsp;</span></p><p><span style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-style: italic; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(102, 102, 102) !important;">@keyframes move {</span></p><p><span style="font-size: 12px;"><span class="crayon-n" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-style: italic; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(102, 102, 102) !important;"> from { transform: translateX(0);</span><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">}</span></span></p><p><span style="font-size: 12px;"><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-k " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">to </span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">{</span><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-e " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">transform</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">:</span><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-i " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;">translateX</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">(</span><span class="crayon-i " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;">70px</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">);</span><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">}</span></span></p><p><span style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">}</span></p><p><span style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(255, 0, 0) !important;">&lt;/style&gt;</span></p><p><span style="font-size: 12px;"><span class="crayon-r " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;">&lt;div </span><span class="crayon-e " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">id</span><span class="crayon-o" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;">=</span><span class="crayon-s " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(221, 17, 68) !important;">"#a"</span><span class="crayon-r " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;">&gt;</span><span class="crayon-i " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;">A</span><span class="crayon-r " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;">&lt;/div&gt;</span></span></p><p><span style="font-size: 12px;"><span class="crayon-r " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;">&lt;div </span><span class="crayon-e " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">id</span><span class="crayon-o" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;">=</span><span class="crayon-s " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(221, 17, 68) !important;">"#b"</span><span class="crayon-r " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;">&gt;</span><span class="crayon-i " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;">B</span><span class="crayon-r " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;">&lt;/div&gt;</span></span></p></blockquote><p><br  /></p><p>浏览器在动画执行之前就知道动画如何开始和结束，因为浏览器没有看到需要reflow和repaint的操作；浏览器就会画两张图像作为复合层，并将它们传入GPU。</p><p><br  /></p><p>这样做有两个优势：</p><p><br  /></p><ul class=" list-paddingleft-2" style="list-style-type: disc;"><li><p>动画将会非常流畅</p></li><li><p>动画不在绑定到CPU，即使js执行大量的工作；动画依然流畅。</p></li></ul><p><br  /></p><p>看起来性能问题好像已经解决了？在下文你会看到GPU动画的一些问题。</p><p><br  /></p><p><span style="color: rgb(0, 0, 0);"><strong>GPU是如何合成图像的</strong></span></p><p><br  /></p><p>GPU实际上可以看作一个独立的计算机，它有自己的处理器和存储器及数据处理模型。当浏览器向GPU发送消息的时候，就像向一个外部设备发送消息。</p><p><br  /></p><p>你可以把浏览器向GPU发送数据的过程，与使用ajax向服务器发送消息非常类似。想一下，你用ajax向服务器发送数据，服务器是不会直接接受浏览器的存储的信息的。你需要收集页面上的数据，把它们放进一个载体里面（例如JSON），然后发送数据到远程服务器。</p><p><br  /></p><p>同样的，浏览器向GPU发送数据也需要先创建一个载体；只不过GPU距离CPU很近，不会像远程服务器那样可能几千里那么远。但是对于远程服务器，2秒的延迟是可以接受的；但是对于GPU，几毫秒的延迟都会造成动画的卡顿。</p><p><br  /></p><p>浏览器向GPU发送的数据载体是什么样？这里给出一个简单的制作载体，并把它们发送到GPU的过程。</p><p><br  /></p><ul class=" list-paddingleft-2" style="list-style-type: disc;"><li><p>画每个复合层的图像</p></li><li><p>准备图层的数据</p></li><li><p>准备动画的着色器（如果需要）</p></li><li><p>向GPU发送数据</p></li></ul><p><br  /></p><p>所以你可以看到，每次当你添加transform:translateZ(0)或will-change：transform给一个元素，你都会做同样的工作。重绘是非常消耗性能的，在这里它尤其缓慢。在大多数情况，浏览器不能增量重绘。它不得不重绘先前被复合层覆盖的区域。</p><p><br  /></p><p><span style="text-decoration: none; color: rgb(0, 0, 0);"><strong>隐式合成</strong></span></p><p><br  /></p><p>还记得刚才a元素和b元素动画的例子吗？现在我们将b元素做动画，a元素静止不动。</p><p><br  /></p><p style="text-align: center;"><img data-src="http://mmbiz.qpic.cn/mmbiz_png/zPh0erYjkib24LZuCujH85EZfnSsNMFZLLfDaPIsxLFSoshu3ZTbqRIASj8MJek6gocwjjMS7UFDfojH4AcGCgw/0?wx_fmt=png" class="" data-type="png" data-ratio="0.42125" data-w="800"  /></p><p><br  /></p><p>和刚才的例子不同，现在b元素将拥有一个独立复合层；然后它们将被GPU合成。但是因为a元素要在b元素的上面（因为a元素的z-index比b元素高），那么浏览器会做什么？浏览器会将a元素也单独做一个复合层！</p><p><br  /></p><p>所以我们现在有三个复合层a元素所在的复合层、b元素所在的复合层、其他内容及背景层。</p><p><br  /></p><p>一个或多个没有自己复合层的元素要出现在有复合层元素的上方，它就会拥有自己的复合层；这种情况被称为隐式合成。</p><p><br  /></p><p>浏览器将a元素提升为一个复合层有很多种原因，下面列举了一些：</p><p><br  /></p><ul class=" list-paddingleft-2" style="list-style-type: disc;"><li><p>3d或透视变换css属性，例如translate3d,translateZ等等（js一般通过这种方式，使元素获得复合层）</p></li><li><p>&lt;video&gt;&lt;iframe&gt;&lt;canvas&gt;&lt;webgl&gt;等元素。</p></li><li><p>混合插件（如flash）。</p></li><li><p>元素自身的 opacity和transform 做 CSS 动画。</p></li><li><p>拥有css过滤器的元素。</p></li><li><p>使用will-change属性。</p></li><li><p>position:fixed。</p></li><li><p>元素有一个 z-index 较低且包含一个复合层的兄弟元素(换句话说就是该元素在复合层上面渲染)</p></li></ul><p><br  /></p><p>这看起来css动画的性能瓶颈是在重绘上，但是真实的问题是在内存上：</p><p><br  /></p><p><span style="color: rgb(0, 0, 0);"><strong>内存占用</strong></span></p><p><br  /></p><p>使用GPU动画需要发送多张渲染层的图像给GPU，GPU也需要缓存它们以便于后续动画的使用。</p><p><br  /></p><p>一个渲染层，需要多少内存占用？为了便于理解，举一个简单的例子；一个宽、高都是300px的纯色图像需要多少内存？</p><p><br  /></p><p>300 300 4 = 360000字节，即360kb。这里乘以4是因为，每个像素需要四个字节计算机内存来描述。</p><p><br  /></p><p>假设我们做一个轮播图组件，轮播图有10张图片；为了实现图片间平滑过渡的交互；为每个图像添加了will-change:transform。这将提升图像为复合层，它将多需要19mb的空间。800 600 4 * 10 = 1920000。</p><p><br  /></p><p>仅仅是一个轮播图组件就需要19m的额外空间！</p><p><br  /></p><p>在chrome的开发者工具中打开setting——》Experiments——》layers可以看到每个层的内存占用。如图所示：</p><p><br  /></p><p style="text-align: center;"><img data-src="http://mmbiz.qpic.cn/mmbiz_png/zPh0erYjkib24LZuCujH85EZfnSsNMFZL1jibfkhtqK1jj0o0QTOls09pOvEsPVHLghKicbPCH3Uibu8ejgicEZq8JA/0?wx_fmt=png" class="" data-type="png" data-ratio="0.45" data-w="800"  /></p><p style="text-align: center;"><img data-src="http://mmbiz.qpic.cn/mmbiz_png/zPh0erYjkib24LZuCujH85EZfnSsNMFZL4TWHjhlxKxrJevguJyqC5vlGxkV2CKo2w4REkN7iaMltp7th1K9icPyg/0?wx_fmt=png" class="" data-type="png" data-ratio="0.24375" data-w="800"  /></p><p><br  /></p><p><span style="color: rgb(0, 0, 0);"><strong>GPU动画的优点和缺点</strong></span></p><p><br  /></p><p>现在我们可以总结一下GPU动画的优点和缺点：</p><p><br  /></p><ul class=" list-paddingleft-2" style="list-style-type: disc;"><li><p>每秒60帧，动画平滑、流畅。</p></li><li><p>一个合适的动画工作在一个单独的线程，它不会被大量的js计算阻塞。</p></li><li><p>3D“变换”是便宜的。</p></li></ul><p><br  /></p><p>缺点：</p><p><br  /></p><ul class=" list-paddingleft-2" style="list-style-type: disc;"><li><p>提升一个元素到复合层需要额外的重绘，有时这是慢的。（即我们得到的是一个全层重绘，而不是一个增量）</p></li><li><p>绘图层必须传输到GPU。取决于层的数量和传输可能会非常缓慢。这可能让一个元素在中低档设备上闪烁。</p></li><li><p>每个复合层都需要消耗额外的内存，过多的内存可能导致浏览器的崩溃。</p></li><li><p>如果你不考虑隐式合成，而使用重绘；会导致额外的内存占用，并且浏览器崩溃的概率是非常高的。</p></li><li><p>我们会有视觉假象，例如在Safari中的文本渲染，在某些情况下页面内容将消失或变形。</p></li></ul><p><br  /></p><p><span style="color: rgb(255, 0, 0);"><strong>优化技巧</strong></span></p><p><br  /></p><p><strong>避免隐式合成</strong></p><p><br  /></p><ul class=" list-paddingleft-2" style="list-style-type: disc;"><li><p>保持动画的对象的z-index尽可能的高。理想的，这些元素应该是body元素的直接子元素。当然，这不是总可能的。所以你可以克隆一个元素，把它放在body元素下仅仅是为了做动画。</p></li><li><p>将元素上设置will-change CSS属性，元素上有了这个属性，浏览器会提升这个元素成为一个复合层（不是总是）。这样动画就可以平滑的开始和结束。但是不要滥用这个属性，否则会大大增加内存消耗。</p></li></ul><p><br  /></p><p><strong>动画中只使用transform和opacity</strong></p><p><br  /></p><p>如上所说，transform和opacity保证了元素属性的变化不影响文档流、也不受文档流影响；并且不会造成repaint。有些时候你可能想要改变其他的css属性，作为动画。例如：你可能想使用background属性改变背景：</p><p><br  /></p><blockquote><p><span style="font-size: 12px;"><span class="crayon-ta" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: rgb(255, 0, 0) !important;">&lt;div </span><span class="crayon-e " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">class="bg-change"&gt;&lt;/div&gt;</span></span></p><p><span style="font-size: 12px;"><span class="crayon-k " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">.bg-change </span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">{</span></span></p><p><span style="font-size: 12px;"><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;">&nbsp;&nbsp;</span><span class="crayon-e " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">width</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">:</span><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-i " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;">100px</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">;</span></span></p><p><span style="font-size: 12px;"><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;">&nbsp;&nbsp;</span><span class="crayon-e " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">height</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">:</span><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-i " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;">100px</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">;</span></span></p><p><span style="font-size: 12px;"><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;">&nbsp;&nbsp;</span><span class="crayon-e " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">background</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">:</span><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-i " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;">red</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">;</span></span></p><p><span style="font-size: 12px;"><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;">&nbsp;&nbsp;</span><span class="crayon-e " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">transition</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">:</span><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-i " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;">opacity</span><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-i " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;">2s</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">;</span></span></p><p><span style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">}</span></p><p><span style="font-size: 12px;"><span class="crayon-k " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">.bg-change:hover </span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">{</span></span></p><p><span style="font-size: 12px;"><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;">&nbsp;&nbsp;</span><span class="crayon-e " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">background</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">:</span><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-i " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;">blue</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">;</span></span></p><p><span style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">}</span></p></blockquote><p><br  /></p><p>在这个例子中，在动画的每一步；浏览器都会进行一次重绘。我们可以使用一个复层在这个元素上面，并且仅仅变换opacity属性：</p><p><br  /></p><blockquote><p><span style="font-size: 12px;"><span class="crayon-r " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: bold !important;">&lt;div </span><span class="crayon-e " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">class</span><span class="crayon-o" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;">=</span><span class="crayon-s " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: rgb(221, 17, 68) !important;">"bg-change"</span><span class="crayon-r " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: bold !important;">&gt;&lt;/div&gt;</span></span></p><p><span style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(255, 0, 0) !important;">&lt;style&gt;</span></p><p><span style="font-size: 12px;"><span class="crayon-k " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">.bg-change </span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">{</span></span></p><p><span style="font-size: 12px;"><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;">&nbsp;&nbsp;</span><span class="crayon-e " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">width</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">:</span><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-i " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;">100px</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">;</span></span></p><p><span style="font-size: 12px;"><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;">&nbsp;&nbsp;</span><span class="crayon-e " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">height</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">:</span><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-i " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;">100px</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">;</span></span></p><p><span style="font-size: 12px;"><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;">&nbsp;&nbsp;</span><span class="crayon-e " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">background</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">:</span><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-i " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;">red</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">;</span></span></p><p><span style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">}</span></p><p><span style="font-size: 12px;"><span class="crayon-k " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">.bg-change::before </span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">{</span></span></p><p><span style="font-size: 12px;"><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;">&nbsp;&nbsp;</span><span class="crayon-e " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">content</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">:</span><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-s" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(221, 17, 68) !important;">''</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">;</span></span></p><p><span style="font-size: 12px;"><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;">&nbsp;&nbsp;</span><span class="crayon-e " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">display</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">:</span><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-i " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;">block</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">;</span></span></p><p><span style="font-size: 12px;"><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;">&nbsp;&nbsp;</span><span class="crayon-e " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">width</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">:</span><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-i " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;">100%</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">;</span></span></p><p><span style="font-size: 12px;"><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;">&nbsp;&nbsp;</span><span class="crayon-e " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">height</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">:</span><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-i " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;">100%</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">;</span></span></p><p><span style="font-size: 12px;"><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;">&nbsp;&nbsp;</span><span class="crayon-e " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">background</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">:</span><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-i " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;">blue</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">;</span></span></p><p><span style="font-size: 12px;"><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;">&nbsp;&nbsp;</span><span class="crayon-e " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">opacity</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">:</span><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-i " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;">0</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">;</span></span></p><p><span style="font-size: 12px;"><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;">&nbsp;&nbsp;</span><span class="crayon-e " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">transition</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">:</span><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-i " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;">opacity</span><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-i " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;">20s</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">;</span></span></p><p><span style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">}</span></p><p><span style="font-size: 12px;"><span class="crayon-k " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">.bg-change:hover::before </span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">{</span></span></p><p><span style="font-size: 12px;"><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;">&nbsp;&nbsp;</span><span class="crayon-e " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">opacity</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">:</span><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-i " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;">1</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">;</span></span></p><p><span style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">}</span></p><p><span style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(255, 0, 0) !important;">&lt;/style&gt;</span></p></blockquote><p><br  /></p><p><strong>减小复合层的尺寸</strong></p><p><br  /></p><p>看一下两张图片，有什么不同吗？</p><p><br  /></p><p style="text-align: center;"><img data-src="http://mmbiz.qpic.cn/mmbiz_png/zPh0erYjkib24LZuCujH85EZfnSsNMFZLGMoKGRUe8tcja37nCVEcs2zjG088oIoicwt4va5XDqIKqZlicib7nYebQ/0?wx_fmt=png" class="" data-type="png" data-ratio="0.19625" data-w="800"  /></p><p><br  /></p><p>这两张图片视觉上是一样的，但是它们的尺寸一个是39kb；另外一个是400b。不同之处在于，第二个纯色层是通过scale放大10倍做到的。</p><p><br  /></p><blockquote><p><span style="font-size: 12px;"><span class="crayon-r " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: bold !important;">&lt;div </span><span class="crayon-e " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">id</span><span class="crayon-o" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;">=</span><span class="crayon-s " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: inherit !important; color: rgb(221, 17, 68) !important;">"a"</span><span class="crayon-r " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; line-height: inherit !important; font-weight: bold !important;">&gt;&lt;/div&gt;</span></span></p><p><span style="font-size: 12px;"><span class="crayon-r " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;">&lt;div </span><span class="crayon-e " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">id</span><span class="crayon-o" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;">=</span><span class="crayon-s " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(221, 17, 68) !important;">"b"</span><span class="crayon-r " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: bold !important;">&gt;&lt;/div&gt;</span></span></p><p><span style="font-size: 12px;">&nbsp;</span></p><p><span style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(255, 0, 0) !important;">&lt;style&gt;</span></p><p><span style="font-size: 12px;"><span class="crayon-k " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">#a, #b </span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">{</span></span></p><p><span style="font-size: 12px;"><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-e " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">will-change</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">:</span><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-i " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;">transform</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">;</span></span></p><p><span style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">}</span></p><p><span style="font-size: 12px;">&nbsp;</span></p><p><span style="font-size: 12px;"><span class="crayon-k " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">#a </span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">{</span></span></p><p><span style="font-size: 12px;"><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-e " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">width</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">:</span><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-i " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;">100px</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">;</span></span></p><p><span style="font-size: 12px;"><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-e " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">height</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">:</span><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-i " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;">100px</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">;</span></span></p><p><span style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">}</span></p><p><span style="font-size: 12px;">&nbsp;</span></p><p><span style="font-size: 12px;"><span class="crayon-k " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">#b </span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">{</span></span></p><p><span style="font-size: 12px;"><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-e " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">width</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">:</span><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-i " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;">10px</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">;</span></span></p><p><span style="font-size: 12px;"><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-e " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">height</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">:</span><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-i " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;">10px</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">;</span></span></p><p><span style="font-size: 12px;"><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-e " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: teal !important;">transform</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">:</span><span class="crayon-h" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(0, 111, 224) !important;"> </span><span class="crayon-i " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;">scale</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">(</span><span class="crayon-i " style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important;">10</span><span class="crayon-sy" style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">);</span></span></p><p><span style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(51, 51, 51) !important;">}</span></p><p><span style="border-width: 0px; border-style: initial; border-color: initial; font-family: inherit; height: inherit; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; color: rgb(255, 0, 0) !important;">&lt;/style&gt;</span></p></blockquote><p><br  /></p><p>对于图片，你要怎么做呢？你可以将图片的尺寸减少5%——10%，然后使用scale将它们放大；用户不会看到什么区别，但是你可以减少大量的存储空间。</p><p><br  /></p><p><strong>用css动画而不是js动画</strong></p><p><br  /></p><p>css动画有一个重要的特性，它是完全工作在GPU上。因为你声明了一个动画如何开始和如何结束，浏览器会在动画开始前准备好所有需要的指令；并把它们发送给GPU。而如果使用js动画，浏览器必须计算每一帧的状态；为了保证平滑的动画，我们必须在浏览器主线程计算新状态；把它们发送给GPU至少60次每秒。除了计算和发送数据比css动画要慢，主线程的负载也会影响动画； 当主线程的计算任务过多时，会造成动画的延迟、卡顿。</p><p><br  /></p><p>所以尽可能地使用基于css的动画，不仅仅更快；也不会被大量的js计算所阻塞。</p><p><br  /></p><p><span style="color: rgb(255, 0, 0);"><strong>优化技巧总结</strong></span></p><p><br  /></p><ul class=" list-paddingleft-2" style="list-style-type: disc;"><li><p>减少浏览器的重排和重绘的发生。</p></li><li><p>不要使用table布局。</p></li><li><p>css动画中尽量只使用transform和opacity，这不会发生重排和重绘。</p></li><li><p>尽可能地只使用css做动画。</p></li><li><p>避免浏览器的隐式合成。</p></li><li><p>改变复合层的尺寸。</p></li></ul><p><br  /></p><p><span style="color: rgb(255, 0, 0);"><strong>参考</strong></span></p><p><br  /></p><p>GPU合成主要参考：</p><p><br  /></p><p>https://www.smashingmagazine….</p><p><br  /></p><p>哪些属性会引起reflow、repaint及composite，你可以在这个网站找到：</p><p><br  /></p><p>https://csstriggers.com/。</p><p><br  /></p><p><br  /></p><p style="max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; background-color: rgb(255, 255, 255); text-align: center; box-sizing: border-box !important; word-wrap: break-word !important;"><span style="max-width: 100%; font-size: 14px; color: rgb(255, 169, 0); box-sizing: border-box !important; word-wrap: break-word !important;">觉得本文对你有帮助？请分享给更多人</span></p><p style="max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; line-height: 25.6px; text-align: center; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;"><strong style="max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;"><span style="max-width: 100%; color: rgb(255, 169, 0); box-sizing: border-box !important; word-wrap: break-word !important;">关注「前端大全」，提升前端技能</span></strong></p><p style="max-width: 100%; min-height: 1em; color: rgb(62, 62, 62); font-size: 16px; white-space: normal; line-height: 25.6px; text-align: center; background-color: rgb(255, 255, 255); box-sizing: border-box !important; word-wrap: break-word !important;"><img data-ratio="0.9166666666666666" data-src="http://mmbiz.qpic.cn/mmbiz_png/zPh0erYjkib0lZCEKibSLcyLMVa3iaNzhWkSPnEBk28r5AAcL4fS03LQn1RWA5M58d7kvysRCibKpHibjs1szyRmnOQ/640?wx_fmt=png" data-type="png" data-w="600" style="box-sizing: border-box !important; word-wrap: break-word !important; visibility: visible !important; width: auto !important;" width="auto"></p>
                    </div>
                    <script nonce="2063410053" type="text/javascript">
                        var first_sceen__time = (+new Date());

                        if ("" == 1 && document.getElementById('js_content'))
                            document.getElementById('js_content').addEventListener("selectstart",function(e){ e.preventDefault(); });

                                        (function(){
                            if (navigator.userAgent.indexOf("WindowsWechat") != -1){
                                var link = document.createElement('link');
                                var head = document.getElementsByTagName('head')[0];
                                link.rel = 'stylesheet';
                                link.type = 'text/css';
                                link.href = "//res.wx.qq.com/mmbizwap/zh_CN/htmledition/style/page/appmsg/page_mp_article_improve_winwx31619e.css";
                                head.appendChild(link);
                            }
                        })();
                    </script>
                    
                    
                                        
                    <div class="ct_mpda_wrp" id="js_sponsor_ad_area" style="display:none;">

                    </div>

                    
                                        
                                        <div class="rich_media_tool" id="js_toobar3">
                                                                    <a class="media_tool_meta meta_primary" id="js_view_source" href="##">阅读原文</a>
                                                <div id="js_read_area3" class="media_tool_meta tips_global meta_primary" style="display:none;">阅读 <span id="readNum3"></span></div>

                        <span style="display:none;" class="media_tool_meta meta_primary tips_global meta_praise" id="like3">
                            <i class="icon_praise_gray"></i><span class="praise_num" id="likeNum3"></span>
                        </span>

                        <a id="js_report_article3" style="display:none;" class="media_tool_meta tips_global meta_extra" href="##">投诉</a>

                    </div>



                                    </div>

                <div class="rich_media_area_primary sougou" id="sg_tj" style="display:none">

                </div>

                <div class="rich_media_area_extra">

                    
                                        <div class="mpda_bottom_container" id="js_bottom_ad_area">
                        
                    </div>
                                        
                    <div id="js_iframetest" style="display:none;"></div>
                                        
                                        <div class="rich_media_extra" id="js_cmt_area" style="display:none">

                        <div class="discuss_container" id="js_cmt_main" style="display:none">
                            <div class="rich_tips with_line title_tips discuss_title_line">
                                <span class="tips">精选留言</span>
                            </div>
                            <p class="tips_global tc title_bottom_tips" id="js_cmt_nofans1" style="display:none;">该文章作者已设置需关注才可以留言</p>
                            <p class="discuss_icon_tips title_bottom_tips tr" id="js_cmt_addbtn1" style="display:none">
                                
                                                                <a href="#comment">写留言<img class="icon_edit" src="//res.wx.qq.com/mmbizwap/zh_CN/htmledition/images/icon/appmsg/icon_edit25ded2.png" alt=""></a>
                                                            </p>
                            <ul class="discuss_list" id="js_cmt_list"></ul>
                        </div>


                        <div class="tips_global rich_split_tips tc" id="js_cmt_nofans2" style="display:none;">
                            该文章作者已设置需关注才可以留言                        </div>

                        <p class="discuss_icon_tips rich_split_tips tr" id="js_cmt_addbtn2" style="display:none">
                            
                                                        <a href="#comment">写留言<img class="icon_edit" src="//res.wx.qq.com/mmbizwap/zh_CN/htmledition/images/icon/appmsg/icon_edit25ded2.png" alt=""></a>
                                                    </p>

                        <p class="rich_split_tips tc tips_global" id="js_cmt_tips" style="display:none;"></p>


                        <div class="rich_tips tips_global loading_tips" id="js_cmt_loading">
                            <img src="//res.wx.qq.com/mmbizwap/zh_CN/htmledition/images/icon/common/icon_loading_white2805ea.gif" class="rich_icon icon_loading_white" alt="">
                            <span class="tips">加载中</span>
                        </div>

                        <div class="rich_tips with_line tips_global" id="js_cmt_statement" style="display:none">
                            <span class="tips">以上留言由公众号筛选后显示</span>
                        </div>

                        <p class="rich_split_tips tc" id="js_cmt_qa" style="display:none;">
                            <a href="http://kf.qq.com/touch/sappfaq/150211YfyMVj150313qmMbyi.html?scene_id=kf264">
                                了解留言功能详情                            </a>
                        </p>

                    </div>
                                    </div>
               
            </div>
            <div id="js_pc_qr_code" class="qr_code_pc_outer" style="display:none;">
                <div class="qr_code_pc_inner">
                    <div class="qr_code_pc">
                        <img id="js_pc_qr_code_img" class="qr_code_pc_img">
                        <p>微信扫一扫<br>关注该公众号</p>
                    </div>
                </div>
            </div>

        </div>
    </div>


        
        <script nonce="2063410053">
    var __DEBUGINFO = {
        debug_js : "//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/biz_wap/debug/console2ca724.js",
        safe_js : "//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/biz_wap/safe/moonsafe2f3e84.js",
        res_list: []
    };
</script>

<script nonce="2063410053">
(function() {
	function _addVConsole(uri) {
		var url = '//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/vconsole/' + uri;
		document.write('<script nonce="2063410053" type="text/javascript" src="' + url + '"><\/script>');
	}
	if (
		(document.cookie && document.cookie.indexOf('vconsole_open=1') > -1)
		|| location.href.indexOf('vconsole=1') > -1
	) {
		_addVConsole('2.5.1/vconsole.min.js');
		_addVConsole('plugin/vconsole-elements/1.0.2/vconsole-elements.min.js');
		_addVConsole('plugin/vconsole-sources/1.0.1/vconsole-sources.min.js');
		_addVConsole('plugin/vconsole-resources/1.0.0/vconsole-resources.min.js');
		_addVConsole('plugin/vconsole-mpopt/1.0.0/vconsole-mpopt.js');
	}
})();
</script>
        
<script nonce="2063410053" type="text/javascript">
    
    if (!window.console) window.console = { log: function() {} };
    
    if (typeof getComputedStyle == 'undefined') {
        if (document.body.currentStyle) {
            window.getComputedStyle = function(el) {
                return el.currentStyle;
            }
        } else {
            window.getComputedStyle = {};
        }
    }
    var occupyImg = function() {
        var images = document.getElementsByTagName('img');
        var length = images.length;
        var container = document.getElementById('img-content');
        var max_width = container.offsetWidth;
        var container_padding = 0;
        var container_style = getComputedStyle(container);
        container_padding = parseFloat(container_style.paddingLeft) + parseFloat(container_style.paddingRight);
        max_width -= container_padding;
        var ua = navigator.userAgent.toLowerCase();
        var re = new RegExp("msie ([0-9]+[\.0-9]*)");
        var version;
        if (re.exec(ua) != null) {
            version = parseInt(RegExp.$1);
        }
        var isIE = false;
        if (typeof version != 'undefined' && version >= 6 && version <= 9) {
            isIE = true;
        }
        if (!max_width) {
            max_width = window.innerWidth - 30;      
        }
        for (var i = 0; i < length; ++i) {
            var src_ = images[i].getAttribute('data-src');
            var realSrc = images[i].getAttribute('src');
            if (!src_ || realSrc) continue;
            var width_ = 1 * images[i].getAttribute('data-w') || max_width;
            var ratio_ = 1 * images[i].getAttribute('data-ratio');
            var height = 100;
            if (ratio_ && ratio_ > 0) {
                var img_style = getComputedStyle(images[i]);
                var init_width = images[i].style.width;
                
                if (init_width) {
                    images[i].setAttribute('_width', init_width);
                    if (init_width != 'auto') width_ = parseFloat(img_style.width);
                }
                var parent_width = 0;
                var parent = images[i].parentNode;
                var outerWidth = 0;
                while (true) {
                    var parent_style = getComputedStyle(parent);
                    if (!parent || !parent_style) break;
                    parent_width = parent.clientWidth - parseFloat(parent_style.paddingLeft) - parseFloat(parent_style.paddingRight) - outerWidth;
                    if (parent_width > 0) break;
                    outerWidth += parseFloat(parent_style.paddingLeft) + parseFloat(parent_style.paddingRight) + parseFloat(parent_style.marginLeft) + parseFloat(parent_style.marginRight) + parseFloat(parent_style.borderLeftWidth) + parseFloat(parent_style.borderRightWidth);
                    parent = parent.parentNode;
                }
                parent_width = parent_width || max_width;
                var width = width_ > parent_width ? parent_width : width_; 
                var img_padding_border = parseFloat(img_style.paddingLeft) + parseFloat(img_style.paddingRight) + parseFloat(img_style.borderLeftWidth) + parseFloat(img_style.borderRightWidth);
                var img_padding_border_top_bottom = parseFloat(img_style.paddingTop) + parseFloat(img_style.paddingBottom) + parseFloat(img_style.borderTopWidth) + parseFloat(img_style.borderBottomWidth);
                img_padding_border = img_padding_border || 0;
                img_padding_border_top_bottom = img_padding_border_top_bottom || 0;
                height = (width - img_padding_border) * ratio_ + img_padding_border_top_bottom;
                images[i].style.cssText += ";width: " + width + "px !important;";
                if (isIE) {
                    var url = images[i].getAttribute('data-src');
                    images[i].src = url;
                } else {
                    images[i].src = "";
                }
            } else {
                images[i].style.cssText += ";visibility: hidden !important;";
            }
            images[i].style.cssText += ";height: " + height + "px !important;";
        }       
    }
    occupyImg();
</script>
<script nonce="2063410053" type="text/javascript">
    
    var not_in_mm_css = "//res.wx.qq.com/mmbizwap/zh_CN/htmledition/style/page/appmsg/not_in_mm322696.css";
    var windowwx_css = "//res.wx.qq.com/mmbizwap/zh_CN/htmledition/style/page/appmsg/page_mp_article_improve_winwx31619e.css";
    var article_improve_combo_css = "//res.wx.qq.com/mmbizwap/zh_CN/htmledition/style/page/appmsg/page_mp_article_improve_combo322696.css";
    var tid = "";
    var aid = "";
    var clientversion = "0";
    var appuin = "MzAxODE2MjM1MA=="||"";

    var source = "0";
    var abtest_cookie = "";

    var scene = 75;

    var itemidx = "";

    var _copyright_stat = "0";
    var _ori_article_type = "";

    var nickname = "前端大全";
    var appmsg_type = "9";
    var ct = "1484488037";
    var publish_time = "2017-01-15" || "";
    var user_name = "gh_1828302cb1b3";
    var user_name_new = "";
    var fakeid   = "";
    var version   = "";
    var is_limit_user   = "0";
    var round_head_img = "http://mmbiz.qpic.cn/mmbiz/zPh0erYjkib2fU730C9luGEz1TYDl70j7hoJQ6O3Lb9GoE38wBVzhLMmL0h9U61ialMT6tLe6UCVLG8JkKdqHHQw/0";
    var ori_head_img_url = "http://wx.qlogo.cn/mmhead/Q3auHgzwzM5qjQiaudDrho224UU1BI7Uu4pqUWWX9dI7FKibUrsdzqZQ/132";
    var msg_title = "一篇文章说清浏览器解析和CSS（GPU）动画优化";
    var msg_desc = "相信不少人在做移动端动画的时候遇到了卡顿的问题，这篇文章尝试从浏览器渲染的角度；一点一点告诉你动画优化的原理及其技巧，作为你工作中优化动画的参考。文末有优化技巧的总结。";
    var msg_cdn_url = "http://mmbiz.qpic.cn/mmbiz_jpg/zPh0erYjkib09SLf8A451tySLafkfQx2eiahBoeBQoRYgSibgn3qfzGsibFKAuwcpLCWqJNstPb87H6mK7xGRCHMnw/0?wx_fmt=jpeg";
    var msg_link = "http://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==\x26amp;mid=2651551663\x26amp;idx=2\x26amp;sn=9be5f570934f0fa39211b5262f66f358\x26amp;chksm=8025a06eb75229782a15591f68637ac7b761c85001fac53f938e42b24150a4dcb46439fba708#rd";
    var user_uin = "0"*1;
    var msg_source_url = 'https://segmentfault.com/a/1190000008015671';
    var img_format = 'jpeg';
    var srcid = '';
    var req_id = '17193ALU6pzlNStbhY2KVpJa';
    var networkType;
    var appmsgid = '' || '2651551663'|| "";
    var comment_id = "410890406" * 1;
    var comment_enabled = "" * 1;
    var is_need_reward = "0" * 1;
    var is_https_res = ("" * 1) && (location.protocol == "https:");
    var msg_daily_idx = "1" || "";

    var devicetype = "";
    var source_encode_biz = "";
    
    
    var reprint_ticket = "";
    var source_mid = "";
    var source_idx = "";

    var show_comment = "";
    var __appmsgCgiData = {
        can_use_page : "0"*1,
        is_wxg_stuff_uin : "0"*1,
        card_pos : "",
        copyright_stat : "0",
        source_biz : "",
        hd_head_img : "http://wx.qlogo.cn/mmhead/Q3auHgzwzM5qjQiaudDrho224UU1BI7Uu4pqUWWX9dI7FKibUrsdzqZQ/0"||(window.location.protocol+"//"+window.location.host + "//res.wx.qq.com/mmbizwap/zh_CN/htmledition/images/pic/appmsg/pic_rumor_link.2x264e76.jpg")
    };
    var _empty_v = "//res.wx.qq.com/mmbizwap/zh_CN/htmledition/images/pic/pages/voice/empty26f1f1.mp3";

    var copyright_stat = "0" * 1;

    var pay_fee = "" * 1;
    var pay_timestamp = "";
    var need_pay = "" * 1;

    var need_report_cost = "0" * 1;
    var use_tx_video_player = "0" * 1;
    var appmsg_fe_filter = "contenteditable";

    var friend_read_source = "" || "";
    var friend_read_version = "" || "";
    var friend_read_class_id = "" || "";

    var is_only_read = "1" * 1;
    var read_num = "" * 1;
    var like_num = "" * 1;
    var liked = "" == 'true' ? true : false;
    var is_temp_url = "" ? 1 : 0;
    var send_time = "";
      var icon_emotion_switch = "//res.wx.qq.com/mmbizwap/zh_CN/htmledition/images/icon/appmsg/emotion/icon_emotion_switch.2x2f1273.png";
      var icon_emotion_switch_active = "//res.wx.qq.com/mmbizwap/zh_CN/htmledition/images/icon/appmsg/emotion/icon_emotion_switch_active.2x2f1273.png";
      var icon_loading_white = "//res.wx.qq.com/mmbizwap/zh_CN/htmledition/images/icon/common/icon_loading_white2805ea.gif";
      var icon_audio_unread = "//res.wx.qq.com/mmbizwap/zh_CN/htmledition/images/icon/appmsg/audio/icon_audio_unread26f1f1.png";
      var icon_qqmusic_default = "//res.wx.qq.com/mmbizwap/zh_CN/htmledition/images/icon/appmsg/qqmusic/icon_qqmusic_default.2x26f1f1.png";
      var icon_qqmusic_source = "//res.wx.qq.com/mmbizwap/zh_CN/htmledition/images/icon/appmsg/qqmusic/icon_qqmusic_source263724.png";

    var topic_default_img = '//res.wx.qq.com/mmbizwap/zh_CN/htmledition/images/icon/appmsg/topic/pic_book_thumb.2x2e4987.png';

    
    
    
    
    
    
    var ban_scene = "0" * 1;

    var svr_time = "1484652518" * 1;

        window.wxtoken = "";
        window.__moon_initcallback = function(){
        if(!!window.__initCatch){
            window.__initCatch({
                idkey : 27613,
                startKey : 0,
                limit : 128,
                badjsId: 43,
                reportOpt : {
                    uin : uin,
                    biz : biz,
                    mid : mid,
                    idx : idx,
                    sn  : sn
                },
                extInfo : {
                    network_rate : 0.01,    
                    badjs_rate: 0.1 
                }
            });
        }
    }
        

</script>

        <script nonce="2063410053">window.__moon_host = 'res.wx.qq.com';window.__moon_mainjs = 'appmsg/index.js';window.moon_map = {"appmsg/emotion/caret.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/emotion/caret278965.js","biz_wap/jsapi/cardticket.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/biz_wap/jsapi/cardticket275627.js","appmsg/emotion/map.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/emotion/map278965.js","appmsg/emotion/textarea.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/emotion/textarea27cdc5.js","appmsg/emotion/nav.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/emotion/nav278965.js","appmsg/emotion/common.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/emotion/common278965.js","appmsg/emotion/slide.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/emotion/slide2a9cd9.js","pages/report.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/pages/report322696.js","pages/music_player.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/pages/music_player325336.js","pages/loadscript.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/pages/loadscript30203e.js","appmsg/emotion/dom.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/emotion/dom31ff31.js","biz_wap/utils/hashrouter.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/biz_wap/utils/hashrouter2805ea.js","biz_common/utils/wxgspeedsdk.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/biz_common/utils/wxgspeedsdk30bcdd.js","a/sponsor.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/a/sponsor3189b5.js","a/app_card.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/a/app_card313f11.js","a/ios.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/a/ios275627.js","a/android.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/a/android2c5484.js","a/profile.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/a/profile31ff31.js","a/sponsor_a_tpl.html.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/a/sponsor_a_tpl.html32c414.js","a/a_tpl.html.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/a/a_tpl.html32c414.js","a/mpshop.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/a/mpshop311179.js","a/card.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/a/card311179.js","biz_wap/utils/position.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/biz_wap/utils/position2f1750.js","a/a_report.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/a/a_report32e586.js","biz_common/utils/respTypes.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/biz_common/utils/respTypes2c57d0.js","appmsg/my_comment_tpl.html.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/my_comment_tpl.html325336.js","appmsg/cmt_tpl.html.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/cmt_tpl.html32e586.js","sougou/a_tpl.html.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/sougou/a_tpl.html2c6e7c.js","appmsg/emotion/emotion.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/emotion/emotion2f3ac3.js","biz_wap/utils/wapsdk.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/biz_wap/utils/wapsdk315b3f.js","biz_common/utils/monitor.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/biz_common/utils/monitor304edd.js","biz_common/utils/report.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/biz_common/utils/report275627.js","appmsg/open_url_with_webview.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/open_url_with_webview3145f0.js","biz_common/utils/http.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/biz_common/utils/http30b871.js","biz_common/utils/cookie.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/biz_common/utils/cookie275627.js","appmsg/topic_tpl.html.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/topic_tpl.html31ff31.js","pages/voice_tpl.html.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/pages/voice_tpl.html2f2e72.js","pages/voice_component.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/pages/voice_component310e30.js","pages/qqmusic_tpl.html.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/pages/qqmusic_tpl.html32c414.js","new_video/ctl.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/new_video/ctl2d441f.js","a/testdata.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/a/testdata31a4be.js","appmsg/reward_entry.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/reward_entry3004a4.js","appmsg/comment.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/comment32a651.js","appmsg/like.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/like2eb52b.js","pages/version4video.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/pages/version4video31d634.js","a/a.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/a/a32e586.js","rt/appmsg/getappmsgext.rt.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/rt/appmsg/getappmsgext.rt2c21f6.js","biz_wap/utils/storage.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/biz_wap/utils/storage2a74ac.js","biz_common/tmpl.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/biz_common/tmpl2b3578.js","appmsg/img_copyright_tpl.html.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/img_copyright_tpl.html2a2c13.js","biz_common/ui/imgonepx.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/biz_common/ui/imgonepx275627.js","biz_wap/utils/ajax.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/biz_wap/utils/ajax3274c9.js","biz_wap/utils/log.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/biz_wap/utils/log2fcb7c.js","sougou/index.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/sougou/index31aefe.js","biz_wap/safe/mutation_observer_report.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/biz_wap/safe/mutation_observer_report2fafd1.js","appmsg/fereport.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/fereport32e586.js","appmsg/report.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/report304cae.js","appmsg/report_and_source.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/report_and_source318ea2.js","appmsg/page_pos.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/page_pos30c907.js","appmsg/cdn_speed_report.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/cdn_speed_report3097b2.js","appmsg/wxtopic.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/wxtopic31a3be.js","appmsg/voice.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/voice310e30.js","appmsg/qqmusic.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/qqmusic31623d.js","appmsg/iframe.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/iframe32707f.js","appmsg/review_image.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/review_image309c11.js","appmsg/outer_link.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/outer_link275627.js","biz_wap/jsapi/core.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/biz_wap/jsapi/core2ffa93.js","appmsg/copyright_report.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/copyright_report2ec4b2.js","appmsg/async.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/async330cc4.js","biz_wap/ui/lazyload_img.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/biz_wap/ui/lazyload_img32a62b.js","biz_common/log/jserr.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/biz_common/log/jserr2805ea.js","appmsg/share.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/share322696.js","appmsg/cdn_img_lib.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/cdn_img_lib30b785.js","biz_common/utils/url/parse.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/biz_common/utils/url/parse2fb01a.js","page/appmsg/not_in_mm.css":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/style/page/appmsg/not_in_mm.css32c99a.js","page/appmsg/page_mp_article_improve_combo.css":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/style/page/appmsg/page_mp_article_improve_combo.css32c99a.js","biz_common/dom/event.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/biz_common/dom/event32e586.js","appmsg/test.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/test314065.js","biz_wap/utils/mmversion.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/biz_wap/utils/mmversion2f1d97.js","appmsg/max_age.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/max_age2fdd28.js","biz_common/dom/attr.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/biz_common/dom/attr275627.js","appmsg/log.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/log300330.js","biz_common/dom/class.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/biz_common/dom/class275627.js","biz_wap/utils/device.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/biz_wap/utils/device2b3aae.js","biz_wap/jsapi/a8key.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/biz_wap/jsapi/a8key2a30ee.js","biz_common/utils/string/html.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/biz_common/utils/string/html29f4e9.js","appmsg/index.js":"//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/appmsg/index332f3f.js"};</script><script nonce="2063410053" type="text/javascript">(function(){function d(a){window.__wxgspeeds.moonls_loadjs_begin=+new Date;var c=document.createElement("script");document.getElementsByTagName("body")[0].appendChild(c);c.type="text/javascript";c.async="async";;c.onload=function(){a&&f()};c.src=b;window.__wxgspeeds.moonls_loadjs_end=+new Date}function f(){window.__wxgspeeds.moonls_save_begin=+new Date;localStorage.setItem("__WXLS__moon",String(__moonf__));localStorage.setItem("__WXLS__moonarg",JSON.stringify({version:b,method:""}));window.__wxgspeeds.moonls_save_end=+new Date}var a=!!top&&!!top.window&&top.window.user_uin||0,e=0!==a&&1>Math.floor(a/100)%100;if(2876363900==a||1506075==a||942807682==a)e=!0;var b="//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/biz_wap/moon32ebc4.js";window.__loadAllResFromMp&&(b=b.replace("res.wx.qq.com","mp.weixin.qq.com"),(new Image).src=location.protocol+"//mp.weixin.qq.com/mp/jsmonitor?idkey=27613_12_1");window.__wxgspeeds||(window.__wxgspeeds={});if("function"==typeof __moonf__)__moonf__(),e&&localStorage&&f();else if(window.__wxgspeeds.moonloadtime=+new Date,e&&localStorage)try{var g=JSON.parse(localStorage.getItem("__WXLS__moonarg"))||{};if(g&&g.version==b){var h=localStorage.getItem("__WXLS__moon");localStorage.setItem("__WXLS__moonarg",JSON.stringify({version:b,method:"fromls"}));window.__moonls_fromls=!0;window.__wxgspeeds.moonls_loadls_end=+new Date;eval(h);__moonf__()}else d(!0)}catch(k){window.__moonls_fail=!0,d(!0)}else d(!1)})();</script>
  <script nonce="2063410053" type="text/javascript">
    var real_show_page_time = +new Date();
    if (!!window.addEventListener){
        window.addEventListener("load", function(){
            window.onload_endtime = +new Date();
        });
    }
    
  </script>

    </body>
    <script nonce="2063410053" type="text/javascript">document.addEventListener("touchstart", function() {},false);</script>
</html>
<!--tailTrap<body></body><head></head><html></html>-->
 
